<template>
  <div>
    <el-descriptions ref="ruleFormRef" :column="2" direction="vertical" v-loading="isLoading">
      <el-descriptions-item width="50%" :label="titles.missionName">
        {{ isNullOrEmpty(formInline?.missionName) }}
      </el-descriptions-item>
      <el-descriptions-item width="50%" :label="titles.cycleValue">
        {{ isNullOrEmpty(formInline?.cycleValue) }}{{ isNullOrEmpty(PERIODUNITTEXT[formInline?.cycleUnit]?.label) }}
      </el-descriptions-item>
      <el-descriptions-item width="50%" :label="titles.missionStatus">
        <span :style="{ color: INSPECTIONSTATUS1TEXT[formInline.missionStatus]?.color }">
          {{ isNullOrEmpty(INSPECTIONSTATUS1TEXT[formInline.missionStatus]?.label) }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item width="50%" label="发起时间">
        {{ isNullOrEmpty(formInline?.createdAt) }}
      </el-descriptions-item>
      <el-descriptions-item width="50%" :label="titles.finishDate">
        {{ isNullOrEmpty(formInline?.finishDate) }}
      </el-descriptions-item>
      <el-descriptions-item width="50%" :label="titles.inspectResult">
        <span :class="formInline.inspectResult == 0 ? 'text-[#4cb61f]' : 'text-[#d22c2e]'">
          {{ isNullOrEmpty(formInline.inspectResult == 0 ? "正常" : `异常(${formInline.inspectResult})`) }}</span>
      </el-descriptions-item>
      <el-descriptions-item width="50%" :label="titles.inspectUser">
        {{ isNullOrEmpty(formInline?.inspectUser) }}
      </el-descriptions-item>
    </el-descriptions>
    <div>
      <el-form ref="ruleFormRef" label-width="auto">
        <div class="flex gap-[20px]">
          <el-form-item label="设施编号" style="width: 220px">
            <el-input v-model.trim="forminfo.facilitSN" clearable placeholder="请输入设施编号" />
          </el-form-item>
          <el-form-item label="处理状态" style="width: 220px">
            <el-select v-model="forminfo.dealStatus" placeholder="请选择巡检状态">
              <el-option :label="item.label" :value="item.value" v-for="item in INSPECTIONSTATUS" :key="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="巡检状态" style="width: 220px">
            <el-select v-model="forminfo.inspectionStatus" placeholder="请选择巡检状态">
              <el-option :label="item.label" :value="item.value" v-for="item in HANDLESTATUS" :key="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="" style="width: 220px">
          </el-form-item>
          <el-form-item>
            <div class="flex">
              <el-button type="primary" @click="getTableList">搜索</el-button>
              <sj-button custom-type="sinfo" @click="resetting">重置</sj-button>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div>
      <div class="flex">
        <el-button type="primary" plain
          :disabled="selectionData.length == 0 || useDataDashboardThemeStore?.dataDashboardType != 2"
          @click="dispatchOrder(1)">派发工单</el-button>
        <el-button type="primary" plain
          :disabled="selectionData.length == 0 || useDataDashboardThemeStore?.dataDashboardType != 2"
          @click="dispatchOrder(2)">一键自动派发</el-button>
      </div>
      <pure-table class="mt-5" :data="tableData.data" :columns="initPureTableConfig(roleTableConfig)"
         @selection-change="selectionChange" :isShowPag="false">
        <template #inspectionStatus="{ row }">
           <span :class="row.inspectionStatus == 2 ? 'text-[#4cb61f]' :row.inspectionStatus == 3 ? 'text-[#d22c2e]':''">
            {{
            HANDLESTATUSTEXT[row.inspectionStatus]?.label
          }}
           </span>
        </template>
        <template #dealStatus="{ row }">
          {{
            row.inspectionStatus == 1 ? '--' : INSPECTIONSTATUSTEXT[row.dealStatus]?.label
          }}
        </template>
        <template #nfcStatus="{ row }">
          {{
            NFCSIGNTEXT[row.nfcStatus]?.label
          }}
        </template>
        <template #inspecinfo="{ row }">
          <el-space>
            <sj-link custom-type="sblue" :underline="false">
              <div class="cursor-pointer" @click="viewImg(row.img)">照片({{ isNullOrEmpty( row.img !== null ? row.img?.length : 0 ) }})</div>
            </sj-link>
            <sj-link custom-type="sblue" :underline="false" @click="viedeoshow(row.video)">
              <div>视频({{ isNullOrEmpty( row.video !== null ? row.video?.length : 0 ) }})</div>
            </sj-link>

          </el-space>
        </template>
      </pure-table>
      <div class="m-5">
        <el-pagination v-model:current-page="forminfo.page" v-model:page-size="forminfo.limit" background
          :layout="PAGE_LAYOUT" :total="tableData.total" @size-change="getTableList" @current-change="getTableList" />
      </div>
    </div>
    <el-image-viewer @close="closeImgViewer" :url-list="imageUrl" fit="none" v-if="showImageViewer" />

    <!-- <sendto v-model="centerDialogVisible" :missionId="taskId" :closedilog="closedilog" :formtablist="selectionData">
    </sendto> -->
  </div>
</template>

<script setup lang="ts">
import { isNullOrEmpty, initPureTableConfig } from '@/utils/functions'
import sendto from "./forms.vue"
import viedeolists from "@/components/videoplay/videolistprop.vue"
import { ref, onMounted } from "vue";
import {
  INSPECTIONSTATUSTEXT,
  INSPECTIONSTATUS,
  HANDLESTATUSTEXT,
  HANDLESTATUS
} from "@/constant/dayly-inspection";
import {
  PERIODUNITTEXT,
  INSPECTIONSTATUS1TEXT,
  NFCSIGNTEXT
} from "@/constant/dayly-inspection";
import {
  getInspectionDetailFacilities,
  autoSendOrder
} from "@/api/screen/lnspection-tasks/index";
import { ElMessage, ElMessageBox } from "element-plus";
import { PAGE_LAYOUT } from "@/constant";
import { useDataDashboardThemeStoreHook } from "@/store/modules/data-dashboard-theme";
import { addDialog, closeDialog } from "@/components/ReDialog";
type FormProps = {
  formInline: any;
  isLoading: boolean;
  taskId: number
};

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({}) as any,
  isLoading: false,
  taskId: 0
});
const centerDialogVisible = ref(false);
const useDataDashboardThemeStore = ref(useDataDashboardThemeStoreHook())
const forminfo = ref({
  facilitId: null,
  inspectionStatus: null,
  dealStatus: null,
  groupId: null,
  missionId: null,
  facilitSN: null,
  page: 1,
  limit: 10
});
const titles = {
  id: "编号", // id
  groupName: "所属分组", // groupName
  facilitId: "设施编号", // facilitSN
  facilitName: "设施名称", // facilitName
  facilitType: "设施类型", // facilitType
  buildingName: "所属建筑",
  facilitStatus: "设施状态", // facilitStatus
  nfcStatus: "NFC状态", // nfcStatus
  inspectionStatus: "巡检状态", // inspectionStatus
  dealStatus: "处理状态", // dealStatus
  inspectAt: "巡检时间", // inspectionTime
  inspectionIssue: "巡检问题",
  inspectionUser: "巡检人", // inspectionUser
  projectName: "所属项目", // projectName
  missionName: "任务名称", // missionName
  missionStatus: "任务状态", // missionStatus
  cycleValue: "巡检周期", // cycleValue
  finishDate: "完成期限", // finishDate
  inspectResult: "巡检结果", // inspectResult
  inspectUser: "巡检人", // inspectUser
  dealCount: "已处理", // dealCount
  action: "操作"
};
const roleTableConfig = [
  { type: "selection", fixed: "left" },
  { prop: "id", label: titles.id, width: 100,fixed: "left"  },
  { prop: "groupName", label: titles.groupName,minWidth:120 ,showOverflowTooltip:true },
  { prop: "facilitName", label: titles.facilitName,minWidth:120 ,showOverflowTooltip:true },
  { prop: "facilitSN", label: titles.facilitId,minWidth:120 },
  { prop: "buildingName", label: titles.buildingName,minWidth:100,showOverflowTooltip:true  },
  { slot: "inspectionStatus", label: titles.inspectionStatus,minWidth:100 },
  { slot: "dealStatus", label: titles.dealStatus,minWidth:100 },
  { prop: "inspectionIssue", label: titles.inspectionIssue,minWidth:160 },
  { slot: "nfcStatus", label: titles.nfcStatus,minWidth:100 },
  { prop: "inspectUser", label: titles.inspectUser,minWidth:100, },
  { prop: "inspectAt", label: titles.inspectAt,minWidth: 160 },
  { slot: "inspecinfo", label: "巡检信息", width: 130 ,showOverflowTooltip:true }
  //   { slot: "action", label: titles.action, width: 150, fixed: "right" }
];
const tableData = reactive({
  data: [],
  total: 0
});

const showImageViewer = ref(false)
let imageUrl = []
// 获取列表数据
const getTableList = () => {
  forminfo.value.missionId = props.taskId;
  getInspectionDetailFacilities(forminfo.value).then(res => {
    if (res.code === 200) {
      tableData.data = res.result.data;
      tableData.total = res.result.total;
    }
  });
};

const viewImg = url => {
  if (!url || url.length < 1) {
    ElMessage({
      message: "暂无图片",
      type: "warning",
    });
    return
  }
  imageUrl = url;
  showImageViewer.value = true;
};
const selectionData = ref([]);
const selectionChange = data => {
  selectionData.value = data;
};
const defaultSearchForm = () => {
  return {
    facilitSN: "",
    inspectionStatus: "",
    dealStatus: "",
    groupId: "",
    missionId: null,
    page: 1,
    limit: 10
  };
};
const closedilog = (e) => {
  centerDialogVisible.value = false;

}
const closeImgViewer = () => {
  showImageViewer.value = false;
};
const dispatchOrder = type => {
  //过滤出dealStatus不为2的数据
  switch (true) {
    case JSON.parse(JSON.stringify(selectionData.value)).filter(item => item.dealStatus != 2).length > 0:
      ElMessage({
        type: "error",
        message: "只能派发巡检状态为已巡检且处理状态为待处理的工单"
      });
      return
  }
  if (type == 1) {
    centerDialogVisible.value = true;
  } else {
    // 自动派发
    autoSendOrder({ missionDetailIds: selectionData.value.map(item => item.id), missionId: props.taskId }).then(res => {
      if (res.code === 200) {
        ElMessage({
          type: "success",
          message: res.msg
        });
        getTableList();
      } else {
        ElMessage({
          type: "error",
          message: res.msg
        });
      }
    });
  }
};
const key = ref(0)
// 重置搜索栏
const resetting = () => {
  //点击重置按键
  Object.assign(forminfo.value, defaultSearchForm());
  key.value++;
  getTableList();
};
onMounted(() => {
  getTableList();
});
const ruleFormRef = ref();
//  const newFormInline = ref(props.formInline as any);
//
//
//  watch(()=>props.formInline,()=>{
//  	newFormInline.value = props.formInline
//  },{
//  	deep:true,
//  	immediate:true
//  })

const viedeoshow = (url) => {
  if (!url || url.length < 1) {
    ElMessage({
      message: "暂无视频",
      type: "warning",
    });
    return
  }
  addDialog({
    title: `巡检视频`,
    hideFooter: true,
    width: "800px",
    draggable: true,
    fullscreen: false,
    props: {
      playlist: url
    },
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(viedeolists),

  });
}
function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
